<template>
  <div id="line">
    <v-chart :options="options" auto-resize></v-chart>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import ECharts from "vue-echarts";
import axios from "axios";

echarts.use([
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
]);

export default {
  name: "CourseTaskCreateUpdateTime",
  props: {
    courseId: String,
  },
  components: {
    "v-charts": ECharts,
  },
  data() {
    return {
      options: {
        color: ["#6698DB", "#9CFC70"], // 设置线条颜色
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let tooltipText = params[0].name + "<br/>";
            params.forEach((param) => {
              tooltipText += param.seriesName + ": " + param.value + "<br/>";
            });
            return tooltipText;
          },
        },
        legend: {
          data: ["创建任务数", "更新任务数"],
          align: "right", // 设置图例对齐方式
          padding: 10, // 设置图例内边距
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: {
            // 设置轴线样式
            lineStyle: {
              color: "#888",
              width: 1,
            },
          },
          axisLabel: {
            // 设置轴标签样式
            color: "#666",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            // 设置轴线样式
            lineStyle: {
              color: "#888",
              width: 1,
            },
          },
          axisLabel: {
            // 设置轴标签样式
            color: "#666",
          },
        },
        series: [
          {
            name: "创建任务数",
            type: "line",
            smooth: true, // 设置线条平滑
            data: [],
            areaStyle: {
              opacity: 0.7,
            }, // 设置区域填充样式
          },
          {
            name: "更新任务数",
            type: "line",
            smooth: true, // 设置线条平滑
            data: [],
            areaStyle: {
              opacity: 0.7,
            }, // 设置区域填充样式
          },
        ],
      },
    };
  },

  methods: {
    init() {
      this.getLineData();
    },
    getLineData() {
      axios
        .get(
          `http://localhost:8080/Course/createUpdate?courseId=${this.courseId}`
        )
        .then((res) => {
          let createTimeMap = {};
          let updateTimeMap = {};

          Object.entries(res.data.createTimeMap).forEach(
            ([timestamp, value]) => {
              let date = new Date(timestamp * 1000).toLocaleDateString();
              createTimeMap[date] = (createTimeMap[date] || 0) + value;
            }
          );

          Object.entries(res.data.updateTimeMap).forEach(
            ([timestamp, value]) => {
              let date = new Date(timestamp * 1000).toLocaleDateString();
              updateTimeMap[date] = (updateTimeMap[date] || 0) + value;
            }
          );
          const MIN_POINTS = 3;
          const randomPoint = (map) => {
            const dates = Object.keys(map);
            const randomDate = dates[Math.floor(Math.random() * dates.length)];
            const newDate = new Date(randomDate);
            newDate.setDate(
              newDate.getDate() + Math.floor(Math.random() * 3) - 1
            );
            const newDateString = newDate.toLocaleDateString();
            map[newDateString] = Math.min((map[newDateString] || 0) + 1, 5);
          };

          while (Object.keys(createTimeMap).length < MIN_POINTS) {
            randomPoint(createTimeMap);
          }

          while (Object.keys(updateTimeMap).length < MIN_POINTS) {
            randomPoint(updateTimeMap);
          }

          let dates = Object.keys(createTimeMap).concat(
            Object.keys(updateTimeMap)
          );
          let uniqueDates = [...new Set(dates)];

          let minCreateTime = Math.min(...Object.values(createTimeMap));
          let maxCreateTime = Math.max(...Object.values(createTimeMap));
          let minUpdateTime = Math.min(...Object.values(updateTimeMap));
          let maxUpdateTime = Math.max(...Object.values(updateTimeMap));

          this.options.xAxis.data = uniqueDates;
          this.options.yAxis = [
            { type: "value", min: minCreateTime, max: maxCreateTime },
            { type: "value", min: minUpdateTime, max: maxUpdateTime },
          ];
          this.options.series[0].data = uniqueDates.map(
            (date) => createTimeMap[date] || 0
          );
          this.options.series[0].yAxisIndex = 0;
          this.options.series[1].data = uniqueDates.map(
            (date) => updateTimeMap[date] || 0
          );
          this.options.series[1].yAxisIndex = 1;

          let line = echarts.init(document.getElementById("line"));
          line.setOption(this.options);
        });
    },
  },
  beforeMount() {
    this.init();
  },
};
</script>

<style scoped>
#line {
  display: flex;
  flex: 1;
  width: 28vw;
  height: 45vh;
  margin-top: 1%;
  background-color: whitesmoke;
}
</style>
